<!--  -->
<template>
  <div class>
    <Head></Head>
     <titlemeta></titlemeta>
    <div class="navContent">
      <div class="navContent_env">办公环境</div>
      <div class="navContent_img">
        <img
          :src="src.imgUrl"
          v-for="(src,key) in imgData"
          :key="key"
          alt
          class="navContent_img_url"
          @click='seePicture(src)'
        />
      </div>
    </div>
    <div>
      <Modal v-model="modal" title="查看图片" width="60%" >

        <div class='classImg'>
            <img :src="seeImg" alt="">
        </div>
        
      </Modal>
    </div>
    <Foot></Foot>
     <lefINvitation class="leftNvit" ref="lefINvitation" @buttop="buttop"></lefINvitation>
    <nightNvitation class="nightNvit" v-if="!mobilePc"></nightNvitation>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import {officeEnv} from '../../api/info'
import titlemeta from '../../components/titlemeta'
import {clieentWidth} from '../../utils/clientwidth'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    titlemeta
  },
  data() {
    //这里存放数据
    return {
      mobilePc:false,
        modal:false,
    seeImg:'',
      imgData: [
     
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

      seePicture(src){
          this.modal = true
         this.seeImg = src.imgUrl
      },
      getofficeEnv(){
        officeEnv().then(res=>{
           console.log(res)
           this.imgData = res.data
        })
      },
          // 回到顶部
    buttop(val) {
      if (val) {
        document.documentElement.scrollTop = 0;
      }
    },
    ismobilePc(){
      if(clieentWidth()){
        this.mobilePc = true
      }else{
        this.mobilePc = false
      }
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getofficeEnv()
    this.ismobilePc()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
@import url("../../assets/nvit.scss");
//@import url(); 引入公共css类
.navContent {
  width: 67%;
  border: 1px solid rgba(54, 54, 54, 0.137);
  padding: 0.2rem 0;
  margin: 0.2rem auto 3rem;
  text-align: center;
}
.navContent_env {
  font-size: 0.3rem;
  color: #333;
}
.navContent_img {
  display: flex;
  // justify-content: center;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.navContent_img_url {
  width: 23%;
  // height: ;: 23%;
  margin: 0.125rem;
  border: 1px solid rgba(54, 54, 54, 0.137);
  cursor: pointer;
}
.navContent_img_url:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}
.classImg{
    text-align: center;
}
/deep/ .ivu-btn-primary{
    display: none !important;
}
@media screen and (max-width: 780px) {
.navContent_env {
  font-size: 1.2rem;
  color: #333;
}
.navContent_img_url{
  width: 90%;
}
.classImg>img{
  width: 100%;
}
}
</style>